<template>
  <header>
    <el-row :gutter="10" type="flex" justify="center" align="middle">
      <el-col :span="4">
        <!-- logo -->
        <img src="@/assets/jz5158/logo.png" alt="logo" />
      </el-col>
      <el-col :span="20">
        <!-- 导航 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(item, index) in navs"
            :key="index"
            :index="item.label"
            >{{ item.text }}</el-menu-item
          >
        </el-menu>
      </el-col>
    </el-row>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      navs: [
        { text: "首页", label: "ShouYe" },
        { text: "产品", label: "ChanPin" },
        { text: "关于", label: "GuanYu" },
      ],
      activeIndex: "ShouYe",
    };
  },
  methods: {
    //每次值改变之后,要emit给父级,父级再给main,让main实现动态加载
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // 子传父 父组件用@绑定 子组件使用$emit调用
      this.$emit("getNavAction", key);
    },
  },
};
</script>

<style>
</style>